<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>学员信息表</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="ss">
<div class="container">
    <div>
        <h1>学员信息表</h1>
        <p>1804</p>
    </div>
</div>
    </div>
<div class="kk">
    <div class="container">
        <h2>添加
        </h2>
        <input type="text" placeholder="请输入姓名" id="mi">
        <select  id="xing">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        <input type="text" placeholder="请输入年龄"  id="nian">
        <button id="btn">点击添加</button>
    </div>
</div>
<div class="zz">
    <div class="container">
        <h3>列表</h3>
    </div>
   <div class="container">
       <div class="sa">
           <p>姓名</p>
           <p>性别</p>
           <p>年龄</p>
       </div>
       <ul id="lisst"></ul>
   </div>
</div>



<script>
    function loadXMLDoc()
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
        {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            // IE6, IE5 浏览器执行代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                var json = JSON.parse(xmlhttp.responseText);
                console.log(json);
                json = json.data.reverse()  // 数据翻转
                document.querySelector('#lisst').innerHTML = ""
                for (let j =0; j<json.length;j++){
                    var li = document.createElement("li");   //createElement() 方法通过指定名称创建一个元素
                    var spanName = document.createElement("span");
                    spanName.innerHTML = json[j].studentName;
                    var spanSex = document.createElement("span");
                    spanSex.innerHTML = json[j].sex;
                    var spanAge = document.createElement("span");
                    spanAge.innerHTML = json[j].age;

                    li.appendChild(spanName);
                    li.appendChild(spanSex);
                    li.appendChild(spanAge);

                    document.querySelector('#lisst').appendChild(li);
                }
                //document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","http://localhost/ajaxApi/public/index.php/index/student/student",true);
        xmlhttp.send();
    }
    loadXMLDoc();
    document.querySelector("#btn").addEventListener("click",function () {
        var mi = document.querySelector("#mi").value;
        console.log(mi);
        var xing = document.querySelector("#xing").value;
        console.log(xing);
        var nian = document.querySelector("#nian").value;
        console.log(nian);



        if(mi != '' && nian != ''){
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            console.log(xmlhttp.responseText);
            //document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            loadXMLDoc();
        }
    }
    xmlhttp.open("GET","http://localhost/ajaxApi/public/index.php/index/student/addStudent?studentName="+mi+"&sex="+xing+"&age="+nian,true);
    xmlhttp.send();
        }else{
            alert("错误,内容不可以为空")
        }
    })

</script>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>